<template>
  <div class="move-list">
    <van-nav-bar 
      title="好物列表" 
      left-text="返回" 
      left-arrow 
      @click-left="onClickLeft"
      class="nav-bar" 
    />
    
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="product-list"
    >
      <div v-for="item in productlist" :key="item.id" class="product-item">
        <van-card
          :num="2"
          :price="item.price+'元'"
          :origin-price="item.price + '元'"
          :desc="item.subName"
          :title="item.name"
          :thumb="item.img.split(',')[0]"
          @click="onClick(item.id)"
        >
          <template #tags>
            <van-rate v-model="value" :count="6" class="product-rate" />
            <van-tag plain type="primary" class="rate-tag">3.5分</van-tag>
          </template>
          
          <template #footer>
            <div class="card-footer">
              <van-button size="small">分享</van-button>
              <van-button size="small">
                <van-icon name="thumb-circle-o" class="like-icon" />
              </van-button>
            </div>
          </template>
        </van-card>
        <div class="divider"></div>
      </div>
    </van-list>
    
    <van-back-top />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue"
import { ProductApi } from "../../api"
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 页面数据
const pageData = reactive({
    id: '',
    name: '',
    pageSize: 5,
    pageNum: 1,
    categoryId: 0
})

// 响应式数据
const productlist = ref([] as any)
const value = ref(3.5)
const loading = ref(false)
const finished = ref(false)

// 生命周期钩子
onMounted(() => {
    pageData.categoryId = Number(route.query.categoryId)
    pageData.name = String(route.query.keyword || '')
})

// 加载数据
const onLoad = () => {
    CallProductApi()
}

// 调用商品API
const CallProductApi = () => {
    loading.value = true
    
    ProductApi.select.call({
        categoryId: pageData.categoryId,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res: any) => {
        loading.value = false
        
        if (res.items.length === 0) {
            finished.value = true
        } else {
            productlist.value = productlist.value.concat(res.items)
            pageData.pageNum++
        }
    })
}

// 点击事件处理
const onClick = (id: number) => {
    router.push({
        name: "cardetails",
        query: { id }
    })
}

const onClickLeft = () => history.back()
</script>

<style scoped>
.move-list {
    background: #f7f8fa;
}

.nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
}

.product-list {
    padding: 10px;
}

.product-item {
    margin-bottom: 10px;
}

.van-card {
    background: #fff;
    border-radius: 8px;
    --van-card-background: #fff;
    --van-card-price-color: #ff6b6b;
    --van-card-price-integer-font-size: 18px;
    --van-card-origin-price-font-size: 15px;
    --van-card-font-size: 14px;
    --van-card-title-line-height: 26px;
}

.product-rate {
    margin-right: 8px;
}

.rate-tag {
    font-size: 16px;
}

.card-footer {
    display: flex;
    gap: 8px;
}

.like-icon {
    color: #ff6b6b;
    font-size: 20px;
}

.van-button {
    --van-button-default-background: #f5f5f5;
    font-size: 15px;
}

.divider {
    height: 1px;
    background: #ebedf0;
    margin: 8px 0;
}
</style>